---
title: Toasts
description: Toast notification components for Tailwind CSS. Responsive UI elements for displaying temporary feedback messages including success, error, warning, and info states with auto-dismiss functionality and customizable positioning.
category: application
emoji: 🔔
slug: toasts
tag: new
wrapper: h-[400px]
terms:
  - alert
  - feedback
  - notification
components:
  - { title: 'Success', dark: true }
  - { title: 'Error', dark: true }
  - { title: 'Warning', dark: true }
  - { title: 'Info', dark: true }
  - { title: 'With action button', dark: true }
  - { title: 'Standout', dark: { contributors: ['WinnyChang'] } }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Toast Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
